@media(max-width:1024px){

    div#contentDiv {
        min-width: 300px;
    }

    #userNameSpan{
        display: none;
    }

    #userInfoBlock{
        right: 0;
        top: 120px;
        max-width:350px;
        min-width:280px;
        width:max-content;
        padding-top: 8px;
        position:absolute;
        display:none;
        overflow-y:auto;
        height: 348px;
        z-index: 102;
        scrollbar-width: thin;
        background-color: #fff;
        border: 1px solid #C5CDD2;
    }

    #userInfoBlock::-webkit-scrollbar {
     width: 10px;
     height: 10px;
     background-color: #d3d3d387;
    }
 
    #userInfoBlock::-webkit-scrollbar-track {
        border-radius: 11px;
    }

    #userInfoBlock::-webkit-scrollbar-thumb {
        -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
        border-radius: 11px;
    }

    .userInformation{
        width: 100%;
        margin-top:0px;
    }

    #userLogOut {
        position: absolute;
        z-index: 251;
        right: -32px;
        top: 298px;
        color: #0069AA;
        border: 1px solid #d3d9dd;
        width: 100%;
        text-align: center;
        padding: 16px 0px 16px 0px;
        background-color: #fff;

    }

    #logoutLink {
        color: #0069AA !important;
    }


    #loggedOutUserDiv
    {
        display: block;
        width:max-content;
        position: absolute;
        right:0;
    }

    #userDetailPopup{
        width:100% !important;
        top:26px;
        right: -32px;
        display: block;
        padding:0;
        position:relative;
    }

    .user-info-firstrow {
        padding: 0px 16px 0px 16px;;
    }

    .user-info-row {
        padding: 0px 16px 0px 16px;;
    }

    .user-info-left-div{
        width: 100%;
        padding: 16px 0px 8px 0px;
    }

    .user-info-right-div{
        width: 100%;
        padding: 8px 0px 16px 0px;
        margin-left: 0;
    }

    #userDetailPopup .user-info-row:last-child {
        text-align: center;
        padding-bottom:0;
    }

    #userDetailPopup .user-info-row:last-child > .user-info-left-div{
        padding: 16px 0px 16px 0px;
    }
    
    .custom-select{
        padding: 2px 6px 6px 8px !important;
        background: #f1f3f4 !important;
    }

    .custom-select:not([multiple]) {
        outline: none !important;        
        width:100%
    }
    
   .custom-select-wrapper::after {
        right: 1%;
    }

    #lblUserName{
        padding-left:0;
    }

    #userIcon{
        position: absolute;
        z-index: 101;
        float: right;
        top: 10px;
        right: 32px;
        cursor: pointer;
        width:24px;
        height:24px;
        background-image: url('/v17.0/webresources/user-icon_inactive.svg?r=23.13');
        display:block !important;
        image-rendering: optimizequality;
        image-rendering: -webkit-optimize-contrast;
    }
    
    #userIcon.selected{
        background-image: url('/v17.0/webresources/user-icon_active.svg?r=23.13');
    }

    .user-half-circle {
        width: 18px;
        height: 8px; 
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        border: 2px solid #0069AA;
        border-bottom: 0;

        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .user-full-circle {
        border: 2px solid #0069AA;
        border-radius: 50%;
        width: 7px;
        height: 7px;
        margin-left: 3px;
        margin-bottom: 1px;
    }
    
    #announcementWrapperDiv {
        position: absolute;
        top: 50px;
        right: 48px;
        z-index: 101;
    }

    .role-dropdown-wrapper::after {
	    top: 34.5%;
    }

    .language-dropdown-wrapper::after {
	    top: 64.5%;
    }

    #menuContainer{
        top: 120px;
        position: relative;
        width: max-content;
    }

    .menuClosed{
        visibility:hidden !important;
    }

    #navSearchDiv {
        width: 100%;
        position: relative;
        z-index: 101;
        display: inline-block;
        background: #fff;
        text-align: center;
        border: 1px solid #DFE3E6;
        margin:0;
        float: unset;
        height:48px;    
    }


     #simpleSearchString  {
        width: 76%; 
        background-color:#F5F7FA;
        font-family: roboto;
        font-size: 12px;
        color:#152935;
        border-style: none;
        height: 24px;
        margin-right: auto !important;
        vertical-align: middle;
        margin-top: 12px;
        margin-bottom: 5px;
     }

     #simpleSearchString:focus {
        outline: none !important;
        box-shadow:none;
        width: 76%; 
     }

     #simpleSearchLinkButton {
        height: 24px;
        width: 22px;
        margin-right: -4px;
        margin-top: 0px;
     }

    .simple-search-container {
        top:12px;
        position: relative;
        margin-right: 0px;
        margin-left: -2px;
    }

    /***************** Jquery UI Menu : Starts ************/



    #navMenu {
        top: 0px;
        left: 0;
        min-width: 17em;
        font-size: 14px;
        bottom: 0;
        padding-left: 82px;
        /*background-color: #DFE3E6;*/
        color: #152935;
        list-style: none;
	    padding: 0;
	    margin: 0;
	    display: block !important;
	    outline: 0;
        width: 100%;
        position: relative;
        overflow-y:auto !important;
        overflow-x:visible !important;
        scrollbar-width: thin;
    }

    #navMenu::-webkit-scrollbar {
     width: 10px;
     height: 10px;
     background-color: #d3d3d387;
    }
 
    #navMenu::-webkit-scrollbar-track {
        border-radius: 11px;
    }

    #navMenu::-webkit-scrollbar-thumb {
        -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
        border-radius: 11px;
    }

    #navMenu > li { 
            display: block;
            border: none;
            width:100%;
            border-top: 1px solid #DFE3E6;
            border-bottom: 1px solid #DFE3E6;
        }

    .responsive-buttons{
        background-color: #DFE3E6;
        width:100%;
        position: absolute;
        height: 40px;
        display: block;
        top: 80px;
    }

    #hamBurger {
        top: 10px;
        left: 32px;
        margin: 0;
        width: 24px;
        height : 24px;
        background-color: #DFE3E6;
        position: absolute;
        cursor: pointer;
        display:block !important;
        background-image: url('/v17.0/webresources/hamburger-menu_inactive.svg?r=23.13');
        image-rendering: optimizequality;
        image-rendering: -webkit-optimize-contrast;
    }
    
    #hamBurger.selected{
        background-image: url('/v17.0/webresources/hamburger-menu_active.svg?r=23.13');
    }
    
 
    #navMenu > ul, li { 
        display: block;
        white-space: nowrap;
        background-color: #FFF;
        width:100%;
        border-bottom: 1px solid #DFE3E6;
        border-top: 1px solid #DFE3E6;
    }

    #navMenu > ul{
        display: inline;
        border-top: 1px;
        border-botton: 1px;
    }
    
    .responsive-hover > a {
        background-color: #dfe3e6 !important;
    }

    .responsive-hover.ui-state-active > a {
        background-color: #f1f3f4 !important;
    }

    #navMenu > a:link, a:visited {
        color: black;
        text-decoration: none;
    }
    
    div#contentDiv{
        position: absolute;
    }

    .menu-level-1, .menu-level-2{
        position: static !important;
        margin-bottom:-1px;
    }

    .ui-menu .ui-menu-item {
	    margin: 0;
	    cursor: pointer;
        padding: 0 !important;

    }
    .has-arrow {
	    padding: 16px 48px 16px 16px !important;
    }

    .menu-level-1 > li{
        margin-top:-1px !important;
    }

    .menu-level-2 > li{
        margin-top:-1px !important;
    }
    
    
    .menu-level-1 > li > a{
        padding: 16px 48px 16px 32px !important;
    }

    .menu-level-2 > li > a{
        padding: 16px 48px 16px 48px !important;
    }

    .ui-menu .ui-menu-item a{
        text-overflow: ellipsis;
        display: inline-block;
        width: -moz-available !important;
        width: -webkit-fill-available !important;
        padding: 16px;

    }
    .ui-menu .ui-menu-item-wrapper {
	    position: relative;
	    padding: .5em 1em .4em 2em;
    }
    .ui-menu .ui-menu-divider {
	    margin: 5px 0;
	    height: 0;
	    font-size: 0;
	    line-height: 0;
	    border-width: 1px 0 0 0;
    }

    .ui-menu .ui-state-focus,
    .ui-menu .ui-state-active {
	    margin: 0px;
        background: #f1f3f4;
        
    }

    .ui-state-focus > ul > li > a
    {
        background: #f1f3f4;
    }

    .ui-state-active > ul > li > a
    {
        background: #f1f3f4;
    }

    .ui-state-active .ui-state-focus a {
        border-top: 1px solid #DFE3E6;
    }

    .ui-state-focus > ul > .ui-state-focus > a:first-child
    {
        background: #dfe3e6 !important;
        border-top: 1px solid #DFE3E6 !important;
    }

    .ui-state-active > ul > .ui-state-focus > a:first-child
    {
        background: #dfe3e6 !important;
        border-top: 1px solid #DFE3E6 !important;
    }
    

    .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active
    {
        border:none;
        border-top: 1px solid #DFE3E6;
    }

    .ui-menu-icon.ui-icon.ui-icon-carat-1-e{
        margin: 14px 16px 16px 0 !important;
        transform: rotate(0deg) !important;
        -webkit-transform: rotate(0deg) !important;
    }

    .ui-state-focus > .ui-menu-icon.ui-icon.ui-icon-carat-1-e{
        transform: rotate(180deg) !important;
        -webkit-transform: rotate(180deg) !important;
        margin: 12px 8px 16px 0 !important;
    }

    .ui-state-active > .ui-menu-icon.ui-icon.ui-icon-carat-1-e{
        transform: rotate(180deg) !important;
        -webkit-transform: rotate(180deg) !important;
        margin: 12px 8px 16px 0 !important;
    }

    .ui-state-focus > .ui-widget.ui-widget-content{
	    border: none;
    }

    .ui-state-active > .ui-widget.ui-widget-content{
	    border: none;
    }

    .ui-state-active,
    .ui-widget-content .ui-state-active,
    .ui-widget-header .ui-state-active,
    a.ui-button:active,
    .ui-button:active,
    .ui-button.ui-state-active:hover >ul {
        background: #f1f3f4;
        font-weight: normal;
        color: #212121;
    }


    .ui-state-hover,
    .ui-widget-content .ui-state-hover,
    .ui-widget-header .ui-state-hover,
    .ui-state-focus,
    .ui-widget-content .ui-state-focus,
    .ui-widget-header .ui-state-focus {
        border: none;
        background: #dfe3e6 !important;
    
    }

    .ui-widget.ui-widget-content
    {
        margin-top:0;
    }
    
    .cross-pub-login{
        overflow: visible !important;
        max-height: 100% !important;
        overflow-y: auto;
    }

    #logoImage{
        width:32px !important;
        height:32px  !important;
    }
    
    #journalLogo{
        width:32px !important;
        height:32px  !important;
    }
    
    .sep_line{
        height: 32px;
        margin: 0px 8px 0px 8px;
    }
    
    img {
        image-rendering: optimizequality;
        image-rendering: -webkit-optimize-contrast;
    }
    #announcementDiv {
        top:38px;
    }

    #logoImageDiv {
        float: none;
        margin: 0px;
        text-align: center;
        height: 32px;
        padding: 12px 0px 0px 0px;
    }

    #journalInfoDiv {
        vertical-align: top;
        word-break: keep-all;
        width: 100%;
        display: inline-block;
        text-align: center;
        line-height: 40px;
    }

    #journalName {
        vertical-align: top;
        text-align: center;
        width: 100%;
        height: auto;
        display: inline-block;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 16px;
        margin: 8px 0px 0px 0px;
    }

    .no-journal-logo {
        margin-top: 0px !important;
    }
}


@media only screen and (min-width:1025px){

    #menuContainer{
        display:block;
        visibility:visible;
        width:100% !important;
        width:max-content;
    }

    #userInfoBlock{
        display:block !important;
    }

    .menu-level-1, .menu-level-2{
        position: absolute !important;
    }

    .user-info-name {
        padding-left: 16px !important;
    }

}